<template>
	<view>
		<view class="header">
			<u-search placeholder="搜索的词" shape="square" :showAction="false"></u-search>
		</view>
		<view class="box">
			<ul>
				<li v-for="item in searchlist" :key="item.id" @click='godetail(item.id)'>
					<view class="left">
						<image :src="'http://localhost:3001'+ item.img" mode=""></image>
					</view>
					<view class="right">
						<view>{{item.goodsname}}</view>
						<view>￥{{item.price}}</view>
						<view>3565评论</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		getsearch
	} from '../../request/app.js'
	export default {
		data() {
			return {
				searchlist: []
			}
		},
		onLoad(options) {
			console.log(options);
			getsearch({
				keywords: options.keywords
			}).then(res => {
				console.log(res, '搜索');
				if (res.data.code == 200) {
					this.searchlist = res.data.list
					console.log(this.searchlist);
				}
			})
		},
		methods: {
			godetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style>
	.header {
		background-color: #FF6633;
		padding: 20rpx 0 10rpx 0;
		box-sizing: border-box;
	}

	.box ul {
		padding: 0 20rpx;
	}

	.box ul li {
		display: flex;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #b0b0b0;
	}

	.box ul li .left image {
		width: 230rpx;
		height: 225rpx;
		background-color: plum;
	}

	.box ul li .right {
		flex: 1;
		margin-left: 60rpx;
	}

	.box ul li .right view:nth-child(1) {
		margin-top: 20rpx;
		color: #333;
		font-size: 36rpx;
	}

	.box ul li .right view:nth-child(2) {
		margin-top: 20rpx;
		color: #ff6040;
		font-size: 32rpx;
	}

	.box ul li .right view:nth-child(3) {
		margin-top: 20rpx;
		color: #b8b8b8;
		font-size: 32rpx;
	}
</style>
